<template>
    <h1>订单列表</h1>
    <div class="box">
    <el-table :data="list" style="width: 100%" empty-text="暂无数据">
        <el-table-column prop="orderid" label="订单编号" width="200" />
        <el-table-column label="图片" width="100">
            <template #default="scope">
                <img class="img" :src="scope.row.img1" />
            </template>
        </el-table-column>
        <el-table-column prop="proname" label="产品名称" width="250" />
        <el-table-column prop="originprice" label="价格" width="80" />
        <el-table-column prop="discount" label="折扣" width="80" />
        <el-table-column prop="num" label="数量" width="100" />
        <el-table-column prop="status" label="订单状态" width="200">
            <template #default="scope">
                <el-radio-group v-model="scope.row.status">
                <el-radio :label="0">未支付</el-radio>
                <el-radio :label="1">待发货</el-radio>
                <el-radio :label="2">待收货</el-radio>
                <el-radio :label="3"> 待评价 </el-radio>
                <el-radio :label="4"> 已完成</el-radio>
            </el-radio-group>
            </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
            <template #default="scope">
                <el-button type="primary" :icon="Edit" circle @click="editorder(scope.row.orderid,scope.row.proname,scope.row.status)"/>
            </template>
        </el-table-column>
       
    </el-table>
    <div>
        <el-select v-model="value" class="m-1" placeholder="分类" size="large" clearable
        @change="(val: string) => bb(val)">
        <el-option v-for="item in sta" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>
    </div>
    <!-- 子组件 -->
    <edc :orderid="editorderid"  :orderproname="editorderproname" :orderstatus="editorderstatus"  @hide="hideFn" @updatesuccess="successFn" v-show="isShowEdit"></edc>
</div>
</template>

<script setup lang="ts">
import { reactive,ref } from 'vue';
import { admin_order_list ,admin_order_statusList} from "../../../utils/api";
import edc from "./editorder.vue";
// icon图标导入
import {
  Edit,
} from '@element-plus/icons-vue'
// 定义数据类型
interface IGoods {
    orderid:string,
    discount: number,
    img1: string,
    originprice: number,
    proname: string,
    num:number,
    status:number
}
// 定义保存数据
const list = reactive<IGoods[]>([])
// 获得订单列表请求
const getorderlist =()=>{
    admin_order_list().then((res:any)=>{
        if (res.data.code==200) {
            list.length=0
            list.push(...res.data.data)
        }
    })
}
getorderlist()
// 父传子
// 父组件需提前在子组件身上定义一个自定义属性
const isShowEdit = ref(false);//控制修改组件的显示和隐藏
const editorderid = ref("");//要修改的 
const editorderproname = ref("");//要修改的 
const editorderstatus = ref();//要修改的 
const editorder=(orderid:string,proname:string,status:number)=>{
    editorderid.value = orderid;
    editorderproname.value=proname;
    editorderstatus.value=status
    isShowEdit.value=true;
}
const hideFn=()=>{
    isShowEdit.value=false
}
// 当修改成功后重新获取数据
const successFn = ()=>getorderlist();
// 3.筛选
const value = ref('')
// 定义筛选的数据
const sta = [
    {
        value: '未支付',
        label: '未支付',
    },
    {
        value: '待发货',
        label: '待发货',
    },
    {
        value: '待收货',
        label: '待收货',
    },
    {
        value: '待评价',
        label: '待评价',
    },
    {
        value: '已完成',
        label: '已完成',
    }
]
// 参数
const a = reactive<{
    status: number,
}>({
 
    status: 0
})
const b = reactive<{
    status: number,
}>({
 
    status: 1
})
const c = reactive<{
    status: number,
}>({
 
    status: 2
})
const d = reactive<{
    status: number,
}>({
 
    status: 3
})
const e = reactive<{
    status: number,
}>({
 
    status: 4
})
// 发请求
const bb = (str: string) => {
    if (str === "未支付") {
        const getgoods = () => {
            admin_order_statusList(a).then((res: any) => {
                if (res.data.code) {
                    list.length = 0;
                    list.push(...res.data.data);
                }
            })
        }
        getgoods()
    } else if (str === "待发货") {
        const getgoods = () => {
            admin_order_statusList(b).then((res: any) => {
                if (res.data.code) {
                    list.length = 0;
                    list.push(...res.data.data);
                }
            })
        }
        getgoods()
    } else if (str === "待收货") {
        const getgoods = () => {
            admin_order_statusList(c).then((res: any) => {
                if (res.data.code) {
                    list.length = 0;
                    list.push(...res.data.data);
                }
            })
        }
        getgoods()
    } else if (str === "待评价") {
        const getgoods = () => {
            admin_order_statusList(d).then((res: any) => {
                if (res.data.code) {
                    list.length = 0;
                    list.push(...res.data.data);
                }
            })
        }
        getgoods()
    } else if (str === "已完成") {
        const getgoods = () => {
            admin_order_statusList(e).then((res: any) => {
                if (res.data.code) {
                    list.length = 0;
                    list.push(...res.data.data);
                }
            })
        }
        getgoods()
    } 
}
</script>

<style scoped>
.box{
    display: flex;
}
.img{
    width: 50%;
    height: 50%;
}
.bb{
    width: 30px;
    height: 50px;
}
</style>